﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link href="~/Styles/bootstrap-datetimepicker-0.0.11/css/datepicker.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-datetimepicker-0.0.11/js/bootstrap-datepicker.js"></script>

    <style>
        .col-md-3 {
            width: 20%;
        }
        .margin-bottom-15 {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id="myModal" class="modal fade" style="">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- dialog body -->
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <span style="color: #BB4945;"></span> 
                </div>
                <!-- dialog buttons -->
                <div class="modal-footer"><button type="button" class="btn btn-primary btnOK">OK</button></div>
            </div>
        </div>
    </div>
    @*<div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->*@

    <div> 
        <div class="container">
            <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title">Sign In</div>
                        <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
                    </div>

                    <div style="padding-top:30px" class="panel-body">

                        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                        <form id="loginform" class="form-horizontal" role="form">

                            <div style="margin-bottom: 25px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input id="login-username" type="text" class="form-control" name="login-username" value="" placeholder="username">                                
                            </div>

                            <div style="margin-bottom: 25px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                <input id="login-password" type="password" class="form-control" name="login-password" placeholder="password">
                            </div>



                            <div class="input-group">
                                <div class="checkbox">
                                    <label>
                                        <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
                                    </label>
                                </div>
                            </div>


                            <div style="margin-top:10px" class="form-group">
                                <!-- Button -->

                                <div class="col-sm-12 controls">
                                    <a id="btn-login" href="#" class="btn btn-success">Login  </a>
                                    <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>

                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-md-12 control">
                                    <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%">
                                        Don't have an account!
                                        <a href="#" onclick="$('#loginbox').hide(); $('#signupbox').show()">
                                            Sign Up Here
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>



                    </div>
                </div>
            </div>
            <div id="signupbox" style="display:none; margin-top:50px; width: 70%;" class="mainbox col-md-6 col-sm-8 col-sm-offset-2">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title">Sign Up</div>
                        <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
                    </div>
                    <div class="panel-body">
                        <form id="signupform" class="form-horizontal" role="form">

                            <div id="signupalert" style="display:none" class="alert alert-danger">
                                <p>Error:</p>
                                <span></span>
                            </div>

                            <div class="form-group">
                                <label for="email" class="col-md-3 control-label" style="width: 18.6%; ">Username</label> <div class="col-md-9" style="width: 77.6%;"> <input type="text" class="form-control" name="Username" id="Username" placeholder="Username"> </div> </div> <div class="form-group"> <label for="email" class="col-md-3 control-label" style="width: 18.6%;">Password</label> <div class="col-md-9" style="width: 77.6%;"> <input type="text" class="form-control" name="Password" id="Password" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-md-12" style="width: 100%;">
                                    <hr /> 
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="firstname" class="col-md-3 control-label" style="width: 18.6%;">First Name</label>
                                <div class="col-md-9" style="width: 77.6%;">
                                    <input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="First Name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-md-3 control-label" style="width: 18.6%;">Last Name</label>
                                <div class="col-md-9" style="width: 77.6%;">
                                    <input type="text" class="form-control" name="LastName" id="LastName" placeholder="Last Name">
                                </div>
                            </div>                            
                            <div class="col-md-6 margin-bottom-15">
                                <label for="email" class="col-md-4 control-label">Email</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="Email" id="Email" placeholder="Email Address">
                                </div>
                            </div>

                            <div class="col-md-6 margin-bottom-15">
                                <label for="icode" class="col-md-4 control-label">Street</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="Street" id="Street" placeholder="Street">
                                </div>
                            </div>
                            <div class="col-md-6 margin-bottom-15">
                                <label for="icode" class="col-md-4 control-label">City</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="City" id="City" placeholder="City">
                                </div>
                            </div>
                            <div class="col-md-6 margin-bottom-15">
                                <label for="icode" class="col-md-4 control-label">State</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="State" id="State" placeholder="State">
                                </div>
                            </div>
                            <div class="col-md-6 margin-bottom-15">
                                <label for="icode" class="col-md-4 control-label">ZipCode</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="ZipCode" id="ZipCode" placeholder="Zip Code">
                                </div>
                            </div>
                            <div class="col-md-6 margin-bottom-15">
                                <label for="icode" class="col-md-4 control-label" style="padding-left: 0;">CreditCardNo</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="CreditCardNo" id="CreditCardNo" placeholder="Credit Card No">
                                </div>
                            </div>
                            <div class="col-md-6 margin-bottom-15">
                                <label for=" icode" class="col-md-4 control-label" style="padding-left: 0;">
                                    ExpirationDate
                                </label>
                                <div class="col-md-8">
                                    @*<input type="text" class="form-control" name="ExpirationDate" id="ExpirationDate" placeholder="ExpirationDate">*@
                                    <input class="datepicker form-control" data-date-fomat="mm/dd/yyyy" />
                                </div>                                
                            </div>
                            <div class="col-md-6 margin-bottom-15">
                                <label for=" icode" class="col-md-4 control-label">
                                    CVS
                                </label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="CVS" id="CVS" placeholder="CVS">
                                </div>
                            </div>

                            @*<div class="form-group">
                                <div class='input-group date' id='datetimepicker5'>
                                    <input type='text' class="form-control" data-date-format="YYYY/MM/DD" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>*@


                            <div class="form-group">
                                <!-- Button -->
                                <div class="col-md-offset-3 col-md-9">
                                    <button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Sign Up</button>
                                    <span style="margin-left:8px;">or</span>
                                </div>
                            </div>

                            <div style="border-top: 1px solid #999; padding-top:20px" class="form-group">

                                <div class="col-md-offset-3 col-md-9">
                                    <button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i>   Sign Up with Facebook</button>
                                </div>

                            </div>


                        </form>
                    </div>
                </div>


            </div>
        </div>

    </div>
</body>

<script type="text/javascript">
    $(function () {                
        $("#myModal button.btnOK").click(function () {
            $("#myModal").modal('hide');
        });

        $('.datepicker').datepicker();
        //$("#myModal").on("show", function () {    // wire up the OK button to dismiss the modal when shown
        //    $("#myModal button.btn").on("click", function (e) {
        //        console.log("button pressed");   // just as an example...
        //        $("#myModal").modal('hide');     // dismiss the dialog
        //    });
        //});


        //$("#myModal").on("hide", function () {    // remove the event listeners when the dialog is dismissed
        //    $("#myModal button.btn").off("click");
        //});

        //$("#myModal").on("hidden", function () {  // remove the actual elements from the DOM when fully hidden
        //    $("#myModal").remove();
        //});

        //$("#myModal").modal({                    // wire up the actual modal functionality and show the dialog
        //    "backdrop": "static",
        //    "keyboard": false,
        //    "show": false                     // ensure the modal is shown immediately
        //});

        function checkedDataLogin() {
            var flag = true;
            if (!$.trim($('#login-username').val())) {
                $('#login-username').attr('placeholder', 'Username is required');
                flag = false;
            }
            if (!$.trim($('#login-password').val())) {
                $('#login-password').attr('placeholder', 'Pasword is required');
                flag = false;
            }
            return flag;
        }

        $('#btn-login').click(function () {            
            if (checkedDataLogin()) {
                var data = { 'username': $('#login-username').val(), 'password': $('#login-password').val() };
                $.ajax({
                    url: '@Url.Content("~/Home/CheckedLogin/")',
                    type: 'POST',
                    data: JSON.stringify(data),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (response) {                        
                        if (response.IsSuccess) {
                            if (response.Permission == 1) {
                                window.location.href = '@Url.Content("~/Admin/Index?UserId=")' + response.UserId + '&UserName=' + response.UserName;
                            }
                            else {
                                window.location.href = '@Url.Content("~/Home/UserInfo/")' + response.UserId;
                            }
                        }
                        else {
                            $("#myModal").modal('show').find('span').html(response.Message);
                        }
                    }
                });
            }
        });

        function checkedDataRegistration() {
            var flag = true;
            if (!$.trim($('#Username').val())) {
                $('#Username').attr('placeholder', 'Username is required');
                flag = false;
            }
            if (!$.trim($('#Password').val())) {
                $('#Password').attr('placeholder', 'Pasword is required');
                flag = false;
            }
            if (!$.trim($('#FirstName').val())) {
                $('#FirstName').attr('placeholder', 'Pasword is required');
                flag = false;
            }
            if (!$.trim($('#LastName').val())) {
                $('#LastName').attr('placeholder', 'Pasword is required');
                flag = false;
            }
            return flag;
        }

        $('#btn-signup').click(function () {
            if (checkedDataRegistration()) {
                debugger
                $.ajax({
                    url: '@Url.Content("~/Home/IsExistsUsername/")',
                    type: 'POST',
                    data: JSON.stringify({ 'Username': $('#Username').val() }),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    async: false,
                    success: function (response) {
                        debugger
                        if (response.IsSuccess == 'false') {                        
                            $("#myModal").modal('show').find('span').html(response.Message);
                            return;
                        }
                        var data = {
                            'username': $('#Username').val(), 'password': $('#Password').val(), 'confirmPassword': $('#Password').val(), 'email': $('#Email').val(),
                            'firstName': $('#FirstName').val(), 'lastName': $('#LastName').val(), 'street': $('#Street').val(), 'city': $('#City').val(), 'state': $('#State').val(),
                            'zipCode': $('#ZipCode').val(), 'creditCardNo': $('#CreditCardNo').val(), 'expirationDate': $('#ExpirationDate').val(), 'cvs': $('#CVS').val()
                        };
                        $.ajax({
                            url: '@Url.Content("~/Home/RegistrationForUser/")',
                            type: 'POST',
                            data: JSON.stringify(data),
                            dataType: 'json',
                            contentType: 'application/json; charset=utf-8',
                            async: false,
                            success: function (response) {
                                alert('Created Account is successfull');
                                window.location.href = '@Url.Content("~/Home")';
                            }
                        });
                    }
                });

                
            }
        });

    });
    
</script>
</html>
